<template>
  <!--连接模式 -->
  <el-dialog
    :title="$t('main.addConnectionDialogTitle')"
    :visible.sync="connectionDialogVisible"
    width="400px"
    :before-close="closeDialog" :modal-append-to-body="false">
    <!-- 连接表单 -->
    <el-form ref="connectionForm" status-icon :model="connection" :rules="rules" label-width="80px">
        <el-form-item label="Host" prop="Host">
          <el-input v-model="connection.Host" :placeholder="$t('FormPlaceholder.Host')"></el-input>
        </el-form-item>
        <el-form-item label="Auth" prop="Auth">
          <el-input v-model="connection.Auth" :placeholder="$t('FormPlaceholder.Auth')"></el-input>
        </el-form-item>
        <el-form-item label="Name" prop="Name">
          <el-input v-model="connection.Name" :placeholder="$t('FormPlaceholder.Name')"></el-input>
        </el-form-item>
        <el-form-item label="Model" prop="Model">
          <el-select v-model="connection.Model" :placeholder="$t('addKey.PleaseChoose')">
              <el-option v-for="item in connectionMode" :key="item.lable" :label="item.lable" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="connectionMethod('connectionForm')">{{$t('FormPlaceholder.OK')}}</el-button>
          <el-button @click="closeDialog">{{$t('FormPlaceholder.cancel')}}</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script>
import storage from '@/redis/storage'
export default {
  props: {
    connectionDialogVisible: false
  },
  data () {
    var checkHost=(rule, value, callback)=>{
      //单机格式校验
      if(this.connection.Model==='StandAlone'){
        var pattern=/^(.*:[0-9]{1,5}){1}$/
        if(!pattern.test(value)){
          callback(new Error(this.$t('FormPlaceholder.HostFormatError')))
        }else{
          callback()
        }
      }
      //Cluster模式至少6个节点
      if(this.connection.Model==='Cluster'){
        var pattern=/^(.*:[0-9]{1,5},){5,}.*:[0-9]{1,5}$/
        if(!pattern.test(value)){
          callback(new Error(this.$t('FormPlaceholder.HostFormatError')))
        }else{
          callback()
        }
      }
      //Sentinels至少3个节点
      if(this.connection.Model==='Sentinels'){
        //集群格式校验
        var pattern=/^(.*:[0-9]{1,5},){2,}.*:[0-9]{1,5}$/
        if(!pattern.test(value)){
          callback(new Error(this.$t('FormPlaceholder.HostFormatError')))
        }else{
          callback()
        }
      }
    }
    return {
      mode:'',
      connectionMode:[
        {"lable":"StandAlone","value":"StandAlone"},
        // {"labl":"Sentinels","value":"Sentinels"},
        {"labl":"Cluster","value":"Cluster"}
      ],
      connection: {
        Host: '127.0.0.1:6379',
        Auth: '',
        Name: '',
        Model:'StandAlone',
        show: false,
        dbSize: 0,
        keys: [],
        total: 0,
        index: 1,
        size: 50,
        choseDb:'DB0',
        match:'',
        disbleSearch:true
      },
      rules: {
        Host: [
          { validator: checkHost,trigger: 'blur' }
        ],
        Name: [
          { required: true, message: this.$t('FormPlaceholder.NameFormatError'), trigger: 'blur' }
        ],
        Model:[
          { required: true, message: this.$t('FormPlaceholder.ModelFormatError'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close-dialogStatus')
    },
    connectionMethod (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let server=Object.assign({}, this.connection)
          if (storage.addConnection(server)) {
            this.$emit("addServers",server)
            this.closeDialog()
            this.$refs[formName].resetFields();
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.el-form >>> .el-input__inner{
  padding: 0 30px 0 15px;
}
</style>